<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" name="" id="" value="" v-model="inputValue" @keyup.enter="handleBtnClick"/>
			<button @click="handleBtnClick">提交</button>
			<ul>
				<todo-item
					:content="item"
					:index="index"
					v-for="(item, index) in list"
					:key="index"
					@delete="handleItemDelete">
				</todo-item>
			</ul>
		</div>

		<script type="text/javascript">
			var TodoItem = {
				props: ["content","index"],
				template: "<li @click='handleItemClick'>{{content}}</li>",
				methods: {
					handleItemClick: function(){
						this.$emit('delete',this.index);
					}
				}
			};

			var app = new Vue({
				el: "#app",
				components: {
					TodoItem: TodoItem
				},
				data: {
					list: [],
					inputValue: ''
				},
				methods: {
					handleBtnClick: function(){
						this.list.push(this.inputValue);
						this.inputValue = ""
					},
					handleItemDelete: function(index){
						this.list.splice(index, 1)
					}
				}
			})
		</script>
	</body>
</html>
